import React, { useReducer, useEffect } from "react";
import "./shop.css";
import '../../assets/css/shop11.css'
import { initState, reducer, actions } from "./shop";
import { reqCartlist,reqCartadd,reqCartdelete} from "../../request/api";
const Shop = (props) => {
  const [state, dispatch] = useReducer(reducer, initState);
  let { cartlist } = state;
  //进来页面
  useEffect(() => {
    Cartlist()
    
}, []);
let Cartlist=()=>{
    //购物车列表
    let uid=JSON.parse(sessionStorage.getItem('info')).uid
    reqCartlist({uid:uid}).then((res) => {
        if(res.data.code===200){
             //存信息
          dispatch(actions.changeCartlist(res.data.list))
        }
    });
}
let Cartadd=(goodsid)=>{
    //购物车添加
    let uid=JSON.parse(sessionStorage.getItem('info')).uid;

    reqCartadd({uid:uid,goodsid:goodsid,type:1,num:1}).then((res) => {
      if(res.data.code===200){
           //存信息
        dispatch(actions.changeCartadd(res.data.list))
        Cartlist()
      }
  });
}
//购物车删除
let Cartdelete=(id)=>{
    reqCartdelete({id:id}).then((res) => {
        if(res.data.code===200){
             //存信息
          dispatch(actions.changeCartdelete(res.data.list))
          Cartlist()
        }
    });
}
return (
  <div className="pad">
      <ul className="shop_nav">
        <li>
          全部(20)
          <span></span>
        </li>
        <li>
          降价(4)
          <span></span>
        </li>
        <li>
          常卖(2)
          <span></span>
        </li>
        <li>
          分类
          <span></span>
        </li>
      </ul>
      <div className="shop_content">
        <div>
          {cartlist[1]? cartlist[1].content.map((item) => (
          <div key={item.id}>
            <input type="checkbox" />
            <img src={item.img} alt="" />
            <ul>
          <li>{item.goodsname}</li>
              <li className="clearfix">
                <div className="fl">
                  <span>￥{item.price}</span>
                  <span>￥1099</span>
                </div>
                <div className="fr">
                  <div className="fl">-</div>
                  <i className="fl">{item.num}</i>
                  <div
                    className="fl" onClick={() => Cartadd(item.goodsid)}
                  >
                    +
                  </div>
                </div>
              </li>
              <li>
                <button onClick={() => Cartdelete(item.id)}>删除</button>
                
              </li>
            </ul>
          </div>
              ))
            : null}
        </div>
      </div>
      <div className="bottom1 clearfix">
        <div className="fl">
          <input type="checkbox" />  
          {/* onChange={() => allcheck(true)}  */}
          <span>全选</span>
        </div>
        <ul className="fr clearfix">
          <li className="fr">
            <input type="button" value="结算" />
          </li>
          <li className="fr">
            <p></p>
            <p>已优惠￥200元</p>
          </li>
          <li className="fr">
            <p>合计</p>
            <p>已免运费</p>
          </li>
        </ul>
      </div>
    </div>
)
  }



export default Shop;

